<!DOCTYPE HTML>
<html>

<head>
	<title>Add A Question</title>
	{% include 'includes.inc' %}
<style>
.error {
	color: red;
	float: right;
 	font-size: 10px;
	display: none;
}

.question_entry {
    overflow: hidden;
	margin: 2em 0;
	font-size: 107%;
	line-height: 1.5em;
}
.question_entry label {
	clear: left;
	float: left;
}

.question_entry input {
	border: 1px solid #EEEEEE;
	clear: left;
	float: left;
	font: 100% 'Inconsolata', sans-serif;
	padding: 5px 10px;
	width: 75%;
}

.question_entry textarea {
	border: 1px solid #EEEEEE;
	clear: left;
	float: left;
	font: 100% 'Inconsolata', sans-serif;
	height: 10em;
	padding: 5px 10px;
	width: 75%;
}

.submit {
	margin-left: 400px;
}
</style>

<script>

	$(document).ready(function(){
		var TYPES = {{ supported_datatype|safe }};
		var editMode = {{ editMode }}; // 0 for new. 1 for partial edit. 2 for full edit.
		var question = {{ question|safe }};
		
		if (editMode > 0) {
			$('#title').val(question.title);
			$('#description').val(question.description);
			$('#return_type').val(question.return_type);
			$('#arguments').val(flatten(question.arg_list));
			$('#question_id').val(question.q_id);
			
			if (editMode == 1) {
				$('#return_type').attr('readonly', true);
				$('#arguments').attr('readonly', true);
			}
			$('#content h1').text('Edit question');
			$('title').text('Edit question');
		}

		// register autocomplete
		$('#return_type').autocomplete({
			source: TYPES
		});

		// register form validation
		$('#question_form').submit(function(){
			return validate();
		});
		
		function validate(){
			var isValid = true;

			var val = $('#title').val() || "";
			val = val.trim();
			$('#title').val(val);
			if(val.length < 6){
				$('#title_error').html('Can you be more specific?');
				$('#title_error').show();
				isValid = false;
			} else {
				$('#title_error').hide();
			}

			val = $('#description').val() || "";
			val = val.trim();
			$('#description').val(val);
			if(val.length < 50){
				$('#description_error').html('Can you be more specific?');
				$('#description_error').show();
				isValid = false;
			} else {
				$('#description_error').hide();
			}

			val = $('#return_type').val() || "";
			if(typeIndex(val) < 0){
				$('#return_type_error').html('Unknown type.');
				$('#return_type_error').show();
				isValid = false;
			} else {
				$('#return_type_error').hide();
			}

			val = $('#arguments').val() || "";
			val = val.split(',')
			var isArgValid = true;
			for(var i = 0; i < val.length; i++){
				var arr = val[i].trim().split(/\s+/);
				if(arr.length != 2 ||
					typeIndex(arr[0]) < 0 ||
					!validArgName(arr[1])) {
					isArgValid = false;
					isValid = false;
					$('#arguments_error').show();
					break;
				}
			}

			if(isArgValid){
				$('#arguments_error').hide();
			}

			return isValid;
		}// function validate()

		function typeIndex(str){
			for(var i = 0; i < TYPES.length; i++){
				if(TYPES[i] == str){
					return i;
				}
			}
			return -1;
		}

		function validArgName(str){
			return /[_a-zA-Z]\w*/.test(str);
		}
		
		// given a list args, return the string representation
		function flatten(arg_list){
			if(!arg_list || !arg_list.length){
				return "";
			}
			var rslt = arg_list[0][0] + " " + arg_list[0][1];
			for(var i = 1; i < arg_list.length; i++) {
				rslt += ', ' + arg_list[i][0] + " " + arg_list[i][1];
			}
			return rslt;
		}
	});//$(document).ready

</script>
</head>

<body>
	<div id="main">

	{% include 'header.inc' %}

    <div id="site_content">
		{% include 'sidebar.inc' %}

      <div id="content">

<h1>Add a new question</h1>
<form id="question_form" action="UpdateQuestion" method="post">
    <div class="question_entry">
        <label for="title">Title</label>
        <input id="title" type="text" name="title" maxlength="100" />
        <span id="title_error" class="error">Title cannot be empty.</span>
    </div>

    <div class="question_entry">
        <label for="description">Description</label>
			<textarea id="description" name="description">/*General description goes here*/


/*Make sure to include explanations for each argument.*/
			</textarea>
        <span id="description_error" class="error">Title cannot be empty.</span>
    </div>

    <div class="question_entry">
        <label for="function_name">Function Name</label>
        <input id="function_name" type="text" name="function_name" maxlength="100" value="solve" class="disabled" readonly="readonly"/>
    </div>

    <div class="question_entry">
        <label for="return_type">Return Value Type</label>
        <input id="return_type" type="text" name="return_type" maxlength="100" />
        <span id="return_type_error" class="error">A Title cannot be empty.</span>
    </div>

    <div class="question_entry">
        <label for="arguments">Function Signature</label>
        <input id="arguments" type="text" name="arguments" maxlength="256" />
        <span id="arguments_error" class="error">See <a>here</a> for example.</span>
    </div>

	<input type='hidden' id='question_id' name='question_id'/>
    <div>
	<!--
		<input class="fancy_button" type="button" id="delete" name="delete" value="Delete"/>
	-->
		<input class="fancy_button submit" type="submit" value="Submit"/>
	</div>
	{% csrf_token %}
</form>

      </div><!-- close content div -->
    </div><!-- close site_content div -->

	{% include 'footer.inc' %}
  </div>
</body>
</html>
